<template>
  <div class="jx-newdetail">
    <div class="title">基本信息<span class="red" style="margin-left: 10px;font-size: 13px;font-weight: 500;">该活动的结算方为云途养护，请谨慎设置</span></div>
    <div class="detail-item">
      <div class="item_2">
        <el-form-item label="活动名称：" prop="item3">
          <el-input v-model="params_list.itme3" placeholder="请输入活动名称">
          </el-input>
        </el-form-item>
        <el-form-item label="活动链接：" prop="item4">
          <el-input v-model="params_list.itme4" placeholder="请输入活动链接">
          </el-input>
        </el-form-item>
        <el-form-item label="活动地区：" prop="item5">
          <el-cascader
            v-model="params_list.itme5"
            :options="options"
            :props="props"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="活动时间：" prop="item7">
          <div class="time-inline">
            <el-date-picker
              v-model="params_list.itme7"
              type="datetime"
              placeholder="选择开始日期">
            </el-date-picker>
            <span class="text">至</span>
            <el-date-picker
              v-model="params_list.itme7"
              type="datetime"
              placeholder="选择结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="使用日期：" prop="item6">
          <div class="time-inline">
            <el-date-picker
              v-model="params_list.itme6"
              type="datetime"
              placeholder="选择开始日期">
            </el-date-picker>
            <span class="text">至</span>
            <el-date-picker
              v-model="params_list.itme6"
              type="datetime"
              placeholder="选择结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
      </div>
      <div class="item_2">
        <el-form-item label="引导logo：" prop="item8">
          <el-upload
            class="avatar-uploader jx-uploader"
            name="pic"
            :data="upload"
            :headers="headers"
            :action="$api.common.upload"
            :show-file-list="false"
            :on-success="uploadlogoSuccess">
            <img v-if="params_list.itme8" :src="params_list.itme8" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> 
        </el-form-item>
        <el-form-item label="引导图：" prop="item9">
          <el-upload
            class="avatar-uploader jx-uploader"
            name="pic"
            :data="upload"
            :headers="headers"
            :action="$api.common.upload"
            :show-file-list="false"
            :on-success="uploadSuccess">
            <img v-if="params_list.itme9" :src="params_list.itme9" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> 
        </el-form-item>
      </div>
    </div>
    <div class="title">优惠券设置</div>
    <div class="detail-item">
      <div class="item_2">
        <el-form-item label="限制品类：" prop="item10">
          <el-select v-model="params_list.itme10" placeholder="请选择">
            <el-option label="品类1" value="1"></el-option>
            <el-option label="品类2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指定商品：" prop="item11">
          <el-input v-model="params_list.itme11" placeholder="请输入指定商品">
          </el-input>
        </el-form-item>
        <el-form-item label="优惠券面值：" prop="item12">
          <el-input v-model="params_list.itme12" type="number" placeholder="请输入优惠券面值">
          </el-input>
        </el-form-item>
        <el-form-item label="使用条件：" prop="item13">
          <el-radio-group v-model="params_list.radio_coupon" @change="getDiscount">
            <el-radio :label="1">不限制使用条件</el-radio>
            <el-radio :label="2">满金额使用</el-radio>
          </el-radio-group>
          <div class="active-item" v-if="boo.isDiscount">
            <div class="item">
              订单满
              <el-input v-model="params_list.item14" placeholder="请填写"></el-input>
              <span>元可使用；</span>
            </div>
          </div>
        </el-form-item>
      </div>
    </div>
    <div class="title">会员参与要求</div>
    <div class="detail-item">
      <div class="item_2">
        <el-form-item label="" prop="item15">
          <el-select v-model="params_list.member.item15" placeholder="请选择">
            <el-option label="所有用户" value="1"></el-option>
            <el-option label="仅限会员用户" value="2"></el-option>
            <el-option label="会员免费领取" value="3"></el-option>
            <el-option label="新用户免费领取" value="4"></el-option>
            <el-option label="所有用户免费领取" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <div class="active-item" style="margin: 0;background: #fff;padding: 0;">
            <div class="item">
              <el-checkbox v-model="params_list.member.checked">
                限购/限领
                <el-input style="margin: 0 5px;" v-model="params_list.member.item16" placeholder="" :disabled="!params_list.member.checked"></el-input>
                <span>份</span>
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="">
          <div class="name">说明：</div>
          <p>1、选择所有用户时，及所有用户均可参与；</p>
          <p>2、选择会员用户时，只有会员用户可以参与活动</p>
          <p>3、选择新会员免费发放时，只要是活动期间注册的新用户，点击领取后，直接发放至个人服务单账户；</p>
        </el-form-item>
      </div>
    </div>
    <div class="title">活动说明</div>
    <div class="detail-item">
      <div class="item">
        <el-input class="textarea" v-model="params_list.item14" type="textarea" :row="6" placeholder="请填写其他说明"></el-input>
      </div>
    </div>
  </div> 
</template>

<script>
  const address = [
    {value: '0',label: '不限'},
    {value: '1',label: '北京', children: [{value: '1-1',label: '东城区'}]},
    {value: '2',label: '安徽', children: [{value: '2-1',label: '合肥'},{value: '2-1',label: '芜湖'}]},
  ]
	export default {
		data() {
			return {
        boo: {
          loading: false,
          isDiscount: false,
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        other: {
          registration_time: true,
        },
        params_list: {
          item3: '',
          item4: '',
          item5: '',
          item6: '',
          item7: '',
          item8: '',
          item9: '',
          member: {
            item15: '',
            item16: '',
            checked: false
          },
          item10: '',
          item11: '',
          item12: '',
          item13: '',
          radio_coupon: '',
          item14: '',
        },
        props: {
          expandTrigger: 'click', 
          value: 'value',
          label: 'label',
        },
        options: address,
        upload: {
          dir: 'work'
        }, 
        rules: {
          item3: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
          item4: [{ required: true, message: '请输入活动链接', trigger: 'blur' }],
          item5: [{ required: true, message: '请选择活动地区', trigger: 'change' }],
          item7: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
          // item8: [{ required: true, message: '请选择引导logo', trigger: 'change' }],
          // item9: [{ required: true, message: '请选择引导图', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      back(){
        history.go(-1)
      },
      uploadlogoSuccess(res, file){
        let _self = this
      	if (res.status == 200) {
          _self.params_list.itme8 = res.data
        } else {
          _self.$message.error(res.message)
        }
      },
      uploadSuccess(res, file) {
        let _self = this
      	if (res.status == 200) {
          _self.params_list.itme9 = res.data
        } else {
          _self.$message.error(res.message)
        }
      }, 
      changeTime(val){
        let _self = this
        if(!val){
          _self.other.registration_time = true
        }else{
          _self.other.registration_time = false        
          _self.params_list.item5 = val
        }
        _self.params_list.item6 = ''
      },
      getDiscount(){
        let _self = this
        if(_self.params_list.radio_coupon == 2){
          _self.boo.isDiscount = true
        }else {
          _self.boo.isDiscount = false
        }
      },
    }
	}

</script>
<style scoped lang="sass">
  .active-item
    margin: 20px 70px 0
    margin-left: 0
    padding: 20px 5px 10px
    background: #fbfbfb
    .item 
      margin-bottom: 20px
      /deep/ .el-input--small
        max-width: 220px
        margin-left: 5px
      .item-text
        display: inline-block
        font-size: 14px
        margin-right: 20px
      .textarea
        width: 100%
        display: block
        margin: 15px 0
        min-width: 400px
  /deep/ .el-range-editor--small.el-input__inner
    width: 70%
  .time-inline
    width: 70%
    display: flex
    .text
      padding: 0 10px
      line-height: 32px
</style>
